.index-main {
    nav {
        // justify-content: space-around;
        align-items: center;
        height: .4rem;
        font-size: .14rem;
        padding: 0 .12rem;
        background: #fff;
        a {
            text-align: center;
            display: inline-block;
            flex: 1;
            line-height: .4rem;
            color: rgba(18, 18, 18, 1);
            &.active {
                color: rgba(95, 49, 4, 1);
                border-bottom: 2px solid rgba(95, 49, 4, 1); // &:before{
                //     content: '.';
                //     display: inline-block;
                //     width: .6rem;
                //     height: 2px;
                //     background: rgba(95,49,4,1);
                // }
            }
        }
    }
    .main {
        width: 100%;
        &>div {
            width: 100%;
            display: none;
            &.active {
                display: block;
            }
        }
        .main-1{
            padding-top: 3px;
            &>img{
                margin-top: .08rem;
                width:100%;
                height:1.6rem;
            }
        }
        .main-2 {
            ul {
                padding-top: .08rem;
                padding-bottom: .7rem;
            }
            li {
                box-shadow: #eee 1px 1px 1px 1px;
                position: relative;
                margin: 0 auto;
                background: #fff;
                width: 3.51rem; // heirght: 2.52rem;
                padding: .08rem;
                box-sizing: border-box;
                .main-2-1 {
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: .08rem;
                    span {
                        margin-left: .61rem;
                        font-size: .1rem;
                        color: rgba(18, 18, 18, 0.9);
                    }
                    em {
                        float: right;
                        background: #f00;
                        width: .45rem;
                        line-height: .24rem;
                        text-align: center;
                        font-size: .08rem;
                        color: #fff;
                    }
                }
                .product {
                    width: 3.35rem;
                    height: 1.6rem;
                }
                .user {
                    position: absolute;
                    width: .44rem;
                    height: .44rem;
                    top: .08rem;
                    left: .2rem;
                    z-index: 1;
                    border-radius: 50%;
                    border: 3px solid #fff;
                }
                .main-2-2 {
                    box-sizing: border-box;
                    padding: 0 .08rem;
                    position: absolute;
                    bottom: .04rem;
                    left: 0;
                    right: 0;
                    font-size: .12rem;
                    color: #fff;
                    background: url('../img/bg@2x.png')no-repeat center;
                    width: 3.35rem;
                    line-height: .3rem;
                }
                .main-2-3 {
                    margin-bottom: .12rem;
                    font-size: .12rem;
                    color: rgba(18, 18, 18, 0.9);
                }
                .spans{
                    background: url('../img/热度 01@2x.png') no-repeat left;
                    background-size: .1rem .13rem;
                    color: #fff;
                    position: absolute;
                    top: .12rem;
                    right: .12rem;
                    padding-left: .14rem;
                    color: red;
                }
                .spans2{
                    background: url('../img/热度 02@2x.png') no-repeat left;
                    background-size: .1rem .13rem;
                    color: #fff;
                    position: absolute;
                    top: .12rem;
                    right: .12rem;
                    padding-left: .14rem;
                    color: red;
                }

                .main-2-4 {
                    justify-content: flex-end;
                    font-size: .16rem;
                    color: rgba(18, 18, 18, 0.25);
                    span {
                        padding-left: .16rem;
                        background: url('../img/热度 02@2x.png')no-repeat left;
                        background-size: .1rem;
                    }
                    em {
                        margin-left: .16rem;
                        padding-left: .16rem;
                        background: url('../img/收藏 02@2x.png')no-repeat left;
                        background-size: .14rem;
                    }
                    i {
                        margin-left: .16rem;
                        padding-left: .16rem;
                        background: url('../img/分享 02@2x.png')no-repeat left;
                        background-size: .1rem;
                    }
                }
            }
        }
        .main-3 {
            ul {
                li {
                    box-shadow: #eee 1px 1px 1px 1px;
                    background: #fff;
                    padding: .08rem;
                    width: 3.35rem;
               
                    display: block;
                    margin: 0 auto;
                    position: relative;
                    img {
                        width: 3.35rem;
                        height: 1.6rem;
                        display: block;
                        margin: 0 auto;
                    }
                    .bt {
                        position: absolute;
                          bottom: .61rem;
                        left: 0.08rem;
                        right: 0.08rem;
                        background: url(../img/文本框@2x.png) no-repeat center;
                        font-size: .12rem;
                        color: rgba(255, 255, 255, 1);
                        line-height: .3rem;
                        box-sizing: border-box;
                        padding: 0 .12rem;
                    }
                    .p1{
                        font-size: .11rem;
                        margin-top: .08rem;
                        span{
                            color: rgba(255,0,0,1);
                        }
                        em{
                          
                        }
                    }
                }
            }
        }
        .main-4{
            ul{
                padding-top: .08rem;
                li{
                    padding:0 .12rem;
                    justify-content: space-between;
                    background: #fff;
                    height:.64rem;
                    align-items: center;
                    img{
                        width:.36rem;
                        height:.36rem;

                    }
                    .center{
                        flex:1;
                        margin-left: .08rem;
                        .p1{
                            font-size: .14rem;
                        }
                        .p2{
                            color: rgba(18,18,18,0.25);
                            font-size: .1rem;
                        }
                    }
                    span{
                        display: block;
                          background: url(../img/下一步@2x.png) no-repeat center;
                    background-size: contain;
                    width: .09rem;
                    height: .16rem;
                    }
                }
            }
        }
        .main-5{
            ul{
                padding-top: .08rem;
                li{
                    width: 49%;
                    height: 2.2rem;
                    position: relative;
                    float: left;
                    margin-bottom: 2%;
                    &:nth-of-type(odd){
                        margin-right: 2%;
                    }
                    img{
                        width: 100%;
                        height:100%;
                    }
                    div{
                        position: absolute;
                        font-size: .12rem;
                        bottom: 0;
                        color: #fff;
                        left: 0;
                        right: 0;
                        padding: .12rem;
                           background: url(../img/文本框@2x.png) no-repeat center;
                    }
/*                       span{
                            background: url('../img/热度 01@2x.png') no-repeat left;
                            background-size: .1rem .13rem;
                            color: #fff;
                            position: absolute;
                            top: .12rem;
                            right: .12rem;
                            padding-left: .14rem;
                            color: red;
                        }*/
                    /*    .spans{
                            background: url('../img/热度 01@2x.png') no-repeat left;
                            background-size: .1rem .13rem;
                            color: #fff;
                            position: absolute;
                            top: .12rem;
                            right: .12rem;
                            padding-left: .14rem;
                            color: red;
                        }
                        .spans2{
                            background: url('../img/热度 02@2x.png') no-repeat left;
                            background-size: .1rem .13rem;
                            color: #fff;
                            position: absolute;
                            top: .12rem;
                            right: .12rem;
                            padding-left: .14rem;
                            color: red;
                        }*/
                }
            }
        }
    }
}

.index-box {
    z-index: 2;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .top {
        background: #fff;
        width: 3.75rem;
        height: 1.13rem;
        justify-content: space-around;
        align-items: center;
        font-size: .12rem;
        color: rgba(18, 18, 18, 0.9);
        text-align: center;
        img {
            width: .48rem;
            height: .48rem;
        }
    }
    .bottom {
        margin-top: .08rem;
        background: #fff;
        line-height: .48rem;
        font-size: .16rem;
        color: rgba(255, 0, 0, 1);
        text-align: center;
    }
}